<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: libo
  Date: 2025/6/23
  Time: 12:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>设备管理系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #0f0f1a;
      position: relative;
      overflow: hidden;
    }

    /* 动态背景网格 */
    .bg-grid {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(#333 1px, transparent 1px),
      linear-gradient(90deg, #333 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.1;
      animation: gridMove 60s linear infinite;
    }

    @keyframes gridMove {
      0% { background-position: 0 0; }
      100% { background-position: 400px 400px; }
    }

    /* 动态粒子背景 */
    .bg-particles {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .particle {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      animation: float 8s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
      10%, 90% { opacity: 0.6; }
      50% { transform: translateY(-100px) rotate(180deg); opacity: 0.6; }
    }

    /* 彩色渐变背景 */
    .bg-glow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 50%, #4a90e2 0%, transparent 40%),
      radial-gradient(circle at 20% 20%, #ff758c 0%, transparent 30%),
      radial-gradient(circle at 80% 80%, #9d65c9 0%, transparent 30%);
      background-size: 200% 200%;
      animation: bgMove 30s ease infinite;
    }

    @keyframes bgMove {
      0%, 100% { background-position: 0% 0%; }
      25% { background-position: 100% 0%; }
      50% { background-position: 100% 100%; }
      75% { background-position: 0% 100%; }
    }

    /* 主容器 - 减小最大宽度 */
    .main-container {
      position: relative;
      z-index: 1;
      width: 95%;
      max-width: 650px; /* 从800px减小到650px */
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      padding: 12px; /* 从16px减小到12px */
      backdrop-filter: blur(15px);
      animation: fadeIn 0.5s ease-out;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(15px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 标题样式 - 减小字体大小 */
    .page-title {
      text-align: center;
      margin-bottom: 12px; /* 从16px减小到12px */
      color: white;
      font-size: 20px; /* 从24px减小到20px */
      font-weight: 600;
      position: relative;
      background: linear-gradient(90deg, #4a90e2, #53a7ea, #71c9ce, #9d65c9, #ff758c);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      background-size: 400% 100%;
      animation: gradientText 8s ease infinite;
    }

    @keyframes gradientText {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* 搜索表单 */
    .search-form {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 8px; /* 从12px减小到8px */
      margin-bottom: 12px; /* 从16px减小到12px */
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .search-form table {
      width: 100%;
    }

    .search-form td {
      padding: 4px; /* 从6px减小到4px */
      color: white;
      font-size: 13px; /* 新增 - 减小字体大小 */
    }

    .search-form input[type="text"] {
      width: 100%;
      padding: 6px 8px; /* 从7px 10px减小到6px 8px */
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px; /* 从5px减小到4px */
      transition: all 0.3s ease;
      outline: none;
      color: white;
      font-size: 12px; /* 从13px减小到12px */
    }

    .search-form input[type="text"]:focus {
      border-color: #4a90e2;
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }

    /* 按钮样式 - 减小尺寸 */
    .action-btn {
      padding: 6px 15px; /* 从8px 20px减小到6px 15px */
      color: white;
      border: none;
      border-radius: 4px; /* 从5px减小到4px */
      cursor: pointer;
      font-size: 13px; /* 从14px减小到13px */
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
      margin: 0 3px; /* 从0 5px减小到0 3px */
    }

    .action-btn span {
      position: relative;
      z-index: 1;
    }

    .action-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: all 0.6s ease;
    }

    .action-btn:hover::before {
      left: 100%;
    }

    .add-btn {
      background: linear-gradient(90deg, #4a90e2, #53a7ea);
    }

    .add-btn:hover {
      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
      transform: translateY(-1px);
    }

    .query-btn {
      background: linear-gradient(90deg, #9d65c9, #b779d8);
    }

    .query-btn:hover {
      box-shadow: 0 4px 12px rgba(157, 101, 201, 0.4);
      transform: translateY(-1px);
    }

    .update-btn {
      background: linear-gradient(90deg, #71c9ce, #8ed6da);
    }

    .update-btn:hover {
      box-shadow: 0 4px 12px rgba(113, 201, 206, 0.4);
      transform: translateY(-1px);
    }

    .delete-btn {
      background: linear-gradient(90deg, #ff758c, #ff96a8);
    }

    .delete-btn:hover {
      box-shadow: 0 4px 12px rgba(255, 117, 140, 0.4);
      transform: translateY(-1px);
    }

    /* 表格样式 - 减小尺寸 */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 12px; /* 从16px减小到12px */
      border-radius: 6px; /* 从8px减小到6px */
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    .data-table th, .data-table td {
      padding: 8px; /* 从10px减小到8px */
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: white;
      font-size: 12px; /* 新增 - 减小字体大小 */
    }

    .data-table th {
      background: rgba(255, 255, 255, 0.08);
      font-weight: 500;
      text-transform: uppercase;
      font-size: 12px; /* 从13px减小到12px */
      letter-spacing: 1px;
    }

    .data-table tr {
      background: rgba(255, 255, 255, 0.03);
      transition: all 0.3s ease;
    }

    .data-table tr:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateX(2px);
    }

    /* 分页样式 - 减小尺寸 */
    .pagination {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 6px; /* 从8px减小到6px */
      padding: 8px; /* 从12px减小到8px */
      border: 1px solid rgba(255, 255, 255, 0.1);
      text-align: center;
      color: white;
      font-size: 12px; /* 从13px减小到12px */
    }

    .pagination a {
      display: inline-block;
      padding: 4px 8px; /* 从5px 12px减小到4px 8px */
      margin: 0 2px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px; /* 从4px减小到3px */
      color: white;
      text-decoration: none;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pagination a:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-1px);
    }
    
    .pagination a.active {
      background: rgba(74, 144, 226, 0.3);
      border: 1px solid rgba(74, 144, 226, 0.5);
      font-weight: bold;
    }
    
    .pagination a.disabled {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* 响应式设计 */
    @media (max-width: 600px) {
      .main-container {
        padding: 8px; /* 从12px减小到8px */
      }

      .search-form td {
        display: block;
        width: 100% !important;
        padding: 4px 0; /* 从6px 0减小到4px 0 */
      }

      .action-btn {
        width: 100%;
        margin: 4px 0; /* 从5px 0减小到4px 0 */
      }

      .data-table th, .data-table td {
        padding: 6px 3px; /* 从8px 4px减小到6px 3px */
        font-size: 11px; /* 从12px减小到11px */
      }
    }
  </style>
</head>
<body>
<div class="bg-grid"></div>
<div class="bg-glow"></div>
<div class="bg-particles"></div>

<div class="main-container">
  <h2 class="page-title">设备管理系统</h2>

  <form action="">
    <%
      List<Map<String,Object>> resultList =(List<Map<String,Object>>) request.getAttribute("resultList");
      if (resultList == null) {
        throw new NullPointerException("resultList is null");
      }
      String currentPage = (String)request.getAttribute("currentPage");
      if (currentPage == null) {
        throw new NullPointerException("currentPage is null");
      }

      int totalCount = (int)request.getAttribute("totalCount");
      if (totalCount == 0) {
        throw new NullPointerException("totalCount is null");
      }
    %>

    <input type="hidden" name="actionType" id = "actionType" value="doQueryDev">
    <input type="hidden" name="devId" id = "devId" value="">

    <div class="search-form">
      <table>
        <tr>
          <td>设备名称：<input type="text" name="devName" id="devName"></td>
          <td>设备类型：<input type="text" name="devType" id="devType"></td>
        </tr>
        <tr>
          <td align="center" colspan="2">
            <button type="button" class="action-btn add-btn" onclick="addDev()">
              <span>添加</span>
            </button>
            <button type="button" class="action-btn query-btn" onclick="queryDev()">
              <span>查询</span>
            </button>
          </td>
        </tr>
      </table>
    </div>

    <div class="data-table">
      <table>
        <tr>
          <th>设备ID</th>
          <th>设备名称</th>
          <th>设备类型</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        <tbody id="devList">
        <%
          for(int i=0;i<resultList.size();i++){
            Map<String,Object> devMap = resultList.get(i);
        %>
        <tr>
          <td><%=devMap.get("dev_id")%></td>
          <td><%=devMap.get("dev_name")%></td>
          <td><%=devMap.get("dev_type")%></td>
          <td><%=(devMap.get("is_valid")+"").equals("Y")?"启用":"未启用"%></td>
          <td>
            <button type="button" class="action-btn update-btn" onclick="updateDev('<%=devMap.get("dev_id")%>')">
              <span>修改</span>
            </button>
            <button type="button" class="action-btn delete-btn" onclick="deleteDev('<%=devMap.get("dev_id")%>')">
              <span>删除</span>
            </button>
          </td>
        </tr>
        <%
          }
        %>
        </tbody>
      </table>
    </div>

    <div class="pagination">
      <% 
        int pageSize = 5;
        int currentPageInt = Integer.parseInt(currentPage);
        int totalPages = (totalCount % pageSize == 0) ? totalCount / pageSize : totalCount / pageSize + 1;
        
        // 显示前后页码范围
        int startPage = Math.max(1, currentPageInt - 2);
        int endPage = Math.min(totalPages, currentPageInt + 2);
      %>
      总共<%=totalCount%>条记录，当前第<%=currentPage%>页/共<%=totalPages%>页<br>
      <a href="#" onclick="queryPage('1')" <%=currentPageInt == 1 ? "class='disabled'" : "" %>>首页</a>
      <a href="#" onclick="queryPage('2')" <%=currentPageInt == 1 ? "class='disabled'" : "" %>>上一页</a>
      
      <% for(int i = startPage; i <= endPage; i++) { %>
        <a href="#" onclick="goToPage(<%=i%>)" <%=i == currentPageInt ? "class='active'" : "" %>><%=i%></a>
      <% } %>
      
      <a href="#" onclick="queryPage('3')" <%=currentPageInt == totalPages ? "class='disabled'" : "" %>>下一页</a>
      <a href="#" onclick="queryPage('4')" <%=currentPageInt == totalPages ? "class='disabled'" : "" %>>尾页</a>
      
      <div style="margin-top: 8px;">
        跳转到第<input type="text" id="gotoPage" style="width: 40px; padding: 4px; margin: 0 5px; text-align: center;" value="<%=currentPageInt%>">页 
        <button type="button" class="action-btn query-btn" onclick="gotoPageSubmit()">跳转</button>
      </div>
      
      <input type="hidden" id="currentPage" name="currentPage" value="<%=currentPage%>">
      <input type="hidden" id="queryType" name="queryType" value="1">
      <input type="hidden" id="totalPages" value="<%=totalPages%>">
    </div>
  </form>
</div>

<script>
  // 创建动态背景粒子 - 减少粒子数量
  function createParticles() {
    const particles = document.querySelector('.bg-particles');
    const colors = ['#4a90e2', '#53a7ea', '#71c9ce', '#9d65c9', '#ff758c', '#ff9d6c'];

    for (let i = 0; i < 50; i++) { // 从80个减少到50个
      const particle = document.createElement('div');
      particle.classList.add('particle');

      // 随机大小、位置、颜色和动画延迟
      const size = Math.random() * 4 + 1; // 减小最大尺寸
      const x = Math.random() * 100;
      const y = Math.random() * 100;
      const color = colors[Math.floor(Math.random() * colors.length)];
      const delay = Math.random() * 20;
      const duration = Math.random() * 12 + 12;

      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;
      particle.style.backgroundColor = color;
      particle.style.left = `${x}vw`;
      particle.style.top = `${y}vh`;
      particle.style.animationDelay = `${delay}s`;
      particle.style.animationDuration = `${duration}s`;

      particles.appendChild(particle);
    }
  }

  // 页面加载完成后创建粒子
  window.addEventListener('load', createParticles);

  function queryPage(queryType) {
    var currentPage = document.getElementById("currentPage").value;
    var totalPages = document.getElementById("totalPages").value;
    
    // 防止在首页点击"上一页"或在尾页点击"下一页"
    if((queryType === "2" && currentPage == 1) || (queryType === "3" && currentPage == totalPages)) {
      return;
    }
    
    document.getElementById("queryType").value = queryType;
    document.forms[0].action = "deviceServlet";
    document.forms[0].submit();
  }
  
  // 直接跳转到指定页
  function goToPage(pageNum) {
    document.getElementById("currentPage").value = pageNum;
    document.getElementById("queryType").value = "5"; // 使用新的查询类型
    document.forms[0].action = "deviceServlet";
    document.forms[0].submit();
  }
  
  // 处理跳转按钮点击
  function gotoPageSubmit() {
    var gotoPage = document.getElementById("gotoPage").value;
    var totalPages = parseInt(document.getElementById("totalPages").value);
    
    // 验证输入
    if(isNaN(gotoPage) || gotoPage < 1) {
      alert("请输入有效的页码");
      return;
    }
    
    if(gotoPage > totalPages) {
      alert("页码不能超过总页数" + totalPages);
      return;
    }
    
    goToPage(gotoPage);
  }

  function queryDev() {
    var devName = document.getElementById('devName').value;
    var devType = document.getElementById('devType').value;
    document.forms[0].action = "deviceServlet";
    document.forms[0].submit();
  }

  function addDev() {
    window.location.href = "dev_add.jsp";
  }

  function updateDev(devId) {
    document.getElementById("actionType").value = "doUpdateDev";
    document.getElementById("devId").value = devId;
    document.forms[0].action = "deviceServlet";
    document.forms[0].submit();
  }

  function deleteDev(devId) {
    if(confirm("确定要删除此设备吗？")) {
      document.getElementById("actionType").value = "doDeleteDev";
      document.getElementById("devId").value = devId;
      document.forms[0].action = "deviceServlet";
      document.forms[0].submit();
    }
  }
</script>
</body>
</html>